Yang baru di web

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Rachel Andrew

Dipublikasikan: 20 Mei 2025

Di Google I/O 2025, presentasi utama "Yang baru di web" membagikan semua pengumuman Dasar Pengukuran, beserta tampilan beberapa fitur yang telah menjadi bagian dari Dasar Pengukuran tahun ini. Ini adalah tahun yang luar biasa bagi web, dan untuk Baseline, postingan ini adalah rangkuman dari semua yang disebutkan, dengan semua link untuk mengetahui lebih lanjut.

Dasbor Platform Web dan fitur web

Pada tahun 2024, kami mengumumkan peluncuran awal Dasbor Platform Web, yang menggunakan set data fitur web, sehingga Anda dapat menjelajahi semua fitur yang merupakan bagian dari Dasar Pengukuran.

Data fitur web kini selesai, dengan semua fitur platform dipetakan. Saat fitur baru bergabung dengan Dasar Pengukuran setiap bulan, data akan diperbarui, dan semua ini ditampilkan di dasbor.

Alat untuk membantu Anda menemukan target Dasar Pengukuran Anda sendiri

Meskipun Anda dapat mendasarkan kebijakan dukungan browser pada target yang berubah dari Baseline yang Tersedia secara luas—seperti agensi Inggris Raya Clearleft—Anda juga dapat menggunakan target tetap berdasarkan tahun Dasar Pengukuran. Kini Anda dapat menggunakan data pengguna Anda sendiri, beserta data fitur web untuk menemukan target terbaik untuk Anda.

Tahun lalu di I/O, kami mengumumkan bahwa RUMvision akan menerapkan Dasar Pengukuran ke dalam produk mereka, dan integrasi ini kini telah aktif.

Karena menggunakan data RUM, fitur ini membantu Anda mengidentifikasi tahun Dasar Pengukuran yang akan digunakan berdasarkan data tersebut, bukan rata-rata global. Hal ini juga dapat membantu Anda melihat apakah Baseline yang Tersedia secara luas sesuai untuk Anda.

Anda juga dapat menggunakan data Google Analytics untuk melihat dengan jelas persentase pengguna yang mendukung setiap target Dasar Pengukuran dengan Pemeriksa Dasar Pengukuran Google Analytics yang baru.

Ini hanyalah dua dari sekumpulan alat yang terus bertambah yang membantu Anda memetakan data pengguna sebenarnya ke Dasar Pengukuran.

Web DX Community Group baru-baru ini meluncurkan ekstensi untuk Netlify yang menunjukkan dukungan untuk tahun Dasar Pengukuran yang berbeda dan Tersedia secara luas di situs Anda untuk membantu Anda memutuskan apa yang akan ditargetkan di alat build. Integrasi dengan produk RUM Observatory Cloudflare dan Contentsquare akan segera hadir.

Mengintegrasikan data dengan alat Anda sendiri

Data fitur web bersifat terbuka dan tersedia untuk integrasi Anda sendiri. Kami mencoba mempermudah proses tersebut.

Gunakan Web Platform Dashboard API, atau gunakan data fitur web secara langsung dari paket npm.

Anda kini dapat memetakan versi browser ke target Dasar Pengukuran menggunakan modul baseline-browser-mapping dari Grup Komunitas WebDX W3C. Modul ini dapat digunakan di lingkungan JavaScript sisi server, atau dengan mendownload file JSON atau CSV yang dimuat ulang setiap hari dari repositori.

Data ini mencakup pemetaan tidak hanya untuk kumpulan browser Baseline inti, tetapi juga untuk browser downstream seperti Samsung Internet, Opera, UC Browser, dan Android Webview.

Pelajari apakah fitur didukung oleh target Dasar Pengukuran Anda

Informasi dasar kini ada di sebagian besar halaman MDN dan Can I Use, informasi ini juga dapat ditemukan di Dasbor Platform Web, dan di artikel di web.dev dan CSS Tricks. Namun, semua ini mengharuskan Anda mencari dukungan. Akan jauh lebih berguna jika informasi Dasar Pengukuran ditampilkan di IDE saat Anda membuat kode, dan sebagai bagian dari semua alat lain yang Anda gunakan.

Dengan senang hati kami sampaikan bahwa banyak alat utama kini memiliki dukungan Dasar Pengukuran bawaan, atau mudah diintegrasikan.

browserslist-config-baseline

Banyak alat seperti Babel dan PostCSS menggunakan browserslist untuk menentukan browser yang akan didukung.

Bersama dengan WebDX CG dan anggota komunitas, tim Chrome membantu merilis alat baru yang disebut browserslist-config-baseline. Hal ini memungkinkan Anda mengonfigurasi target daftar browser dalam istilah Dasar Pengukuran seperti tahun Dasar Pengukuran atau tersedia secara luas.

Dengan demikian, alat apa pun yang menggunakan target browserslist kini dapat dinyatakan dalam hal Dasar Pengukuran.

Cari tahu selengkapnya di Menggunakan Dasar Pengukuran dengan browserslist.

Dasar pengukuran di linter—ESLint dan Stylelint

Penggunaan Dasar Pengukuran dengan linter baru-baru ini dimungkinkan dengan beberapa alat baru di ruang linter, dimulai dengan ESLint untuk CSS.

ESLint dasar pengukuran memiliki aturan use-baseline. Anda dapat menetapkannya ke target Dasar Pengukuran yang diinginkan, dan fitur ini akan memperingatkan Anda saat menggunakan fitur yang lebih baru dari target Anda. Anda dapat memilih cara menyelesaikan peringatan tersebut: dengan mengganti fitur tersebut dengan primitif atau dengan menyembunyikan peringatan linter, yang merupakan solusi yang sangat valid jika Anda tahu bahwa Anda menggunakan fitur canggih dengan aman, misalnya jika itu adalah progressive enhancement.

Secara default, ESLint tidak akan memperingatkan jika fitur yang lebih baru digunakan dalam blok @supports, karena browser yang tidak didukung tidak akan mengevaluasinya.

Untuk kebutuhan linting HTML, ada juga plugin komunitas yang disebut html-eslint.

Stylelint secara resmi mendukung plugin yang disebut stylelint-plugin-use-baseline. Aturan ini berperilaku seperti aturan ESLint untuk CSS, tetapi berjalan di Stylelint.

Banyak linter juga memiliki plugin IDE, sehingga Anda bisa mendapatkan masukan langsung tentang status Dasar Pengukuran saat melakukan coding melalui garis bawah bergelombang.

Dasar pengukuran di VS Code dan JetBrains WebStorm

Banyak IDE telah lama mendukung cara mengarahkan kursor ke fitur di editor dan melihat daftar versi browser yang didukung.

Namun, cukup sulit untuk memahami apakah fitur tersebut benar-benar aman untuk digunakan—Anda perlu mengurai secara mental apakah ada browser utama yang tidak ada dalam daftar tersebut dan seberapa baru versi browser tersebut.

Untuk memperbaiki masalah tersebut, kami telah berpartner dengan IDE paling populer yang digunakan oleh jutaan developer web, VS Code, untuk mengintegrasikan data Dasar Pengukuran secara langsung ke dalam kartu informasi ini.

Anda kini dapat mengarahkan kursor ke fitur dan fitur tersebut hanya akan memberi tahu Anda apakah fitur tersebut dianggap sebagai Dasar Pengukuran dan berapa lama, atau apakah ada browser utama yang belum menerapkannya sepenuhnya.

Fitur yang didukung mencakup properti CSS, elemen HTML, dan atribut HTML. Cari tahu selengkapnya di Visual Studio Code kini mendukung Baseline.

Integrasi ini berarti bahwa IDE apa pun yang berbasis VS Code juga akan mendapatkan manfaat dari hovercard ini.

Selain itu, kami juga dapat mengumumkan bahwa JetBrains menerapkan kartu pengarahan ke IDE JavaScript dan TypeScript WebStorm mereka.

Web berkembang lebih cepat dari sebelumnya

Kami harap Dasar Pengukuran membantu Anda memanfaatkan fakta bahwa web yang interoperabilitasnya meningkat lebih cepat dari sebelumnya.

Anda dapat menggunakan Dasbor Platform Web untuk melihat semua fitur yang telah menjadi Dasar Pengukuran yang Baru tersedia dalam dua belas bulan terakhir—sejak Google I/O 2024.

Ada juga sejumlah fitur yang dapat Anda yakini akan segera tersedia di Dasar Pengukuran karena disertakan dalam project Interop 2025. Anda dapat membaca semua fitur yang disertakan di Interop2025: satu tahun lagi peningkatan platform web.

Mode penulisan menyamping

Kita telah melihat satu fitur menjadi Dasar Pengukuran yang Baru tersedia, yaitu nilai sideways-rl dan sideways-lr untuk properti writing-mode CSS. Jika Anda menggunakan mode penulisan vertikal hanya untuk tujuan tata letak, nilai samping mungkin adalah nilai yang akan dijangkau.

h1 {
  writing-mode: sideways-rl;
}

h2 {
  writing-mode: sideways-lr;
}

Penempatan anchor

Pemosisi anchor dikirimkan di Chrome 125. Ini memberi Anda cara untuk mengikat posisi elemen ke anchor, misalnya saat membuka tooltip dengan tombol.

Sekarang, fitur ini disertakan dalam Interop 2025, jadi kita akan melihatnya bergabung dengan Baseline tahun ini.

Core Web Vitals: LCP dan INP

LCP API

Event Timing API (untuk INP)

Data Web dapat membantu Anda mengukur pengalaman penggunaan situs dan mengidentifikasi peluang untuk peningkatan. Inisiatif Web Vitals bertujuan untuk menyederhanakan lanskap, dan membantu situs berfokus pada metrik yang paling penting, yaitu Data Web Inti.

Interop 2025 mencakup metrik Largest Contentful Paint (LCP) dan Interaction to Next Paint (INP) dengan menerapkan LargestContentfulPaint API dan Event Timing API di seluruh browser.

Peningkatan pada elemen <details>

Elemen <details> itu sendiri sudah tersedia secara luas di Dasar Pengukuran. Fitur ini telah disertakan dalam Interop 2025 karena ada sejumlah fitur yang membuat widget pengungkapan dengan <details> lebih berguna.

Elemen <details> berisi elemen <summary> yang merupakan bagian yang terlihat di halaman saat elemen <details> diciutkan. Di luar <summary> adalah konten elemen <details>, yang disembunyikan hingga pengguna mengklik ringkasan.

Salah satu hal yang dibuat interoperabilitasnya selama Interop 2025 adalah menyembunyikan konten menggunakan content-visibility, bukan display, yang berarti bahwa jika tidak diperluas, konten tidak akan dirender sama sekali.

Pseudo-elemen ::marker juga merupakan bagian dari pekerjaan Interop 2025. Pseudo-elemen ::marker memungkinkan Anda menata gaya segitiga pengungkapan elemen <summary>.

summary::marker {
  content: "+ ";
  font-family: monospace;
  color: red;
  font-weight: bold;
}

Kemudian, elemen pseudo lain—::details-content.

::details-content mewakili konten—bagian elemen detail yang diperluas dan diciutkan, serta memungkinkan Anda menata gayanya.

[open]::details-content {
  border: 5px dashed hotpink;
}

Ada juga beberapa peningkatan yang bagus seperti memperluas elemen <details> secara otomatis dengan pencocokan temukan di halaman, dan memasukkan nilai until-found dari atribut hidden HTML ke Dasar Pengukuran yang baru tersedia. Tindakan ini akan menyembunyikan elemen hingga ditemukan menggunakan penelusuran temukan di halaman browser atau diarahkan langsung dengan mengikuti fragmen URL.

CSS @scope

Aturan @scope CSS memungkinkan Anda membatasi jangkauan pemilih. Dengan menetapkan root cakupan dengan @scope, aturan gaya apa pun yang disusun bertingkat di dalam at-rule hanya berlaku untuk hierarki DOM tersebut.

Misalnya, jika Anda hanya ingin menargetkan elemen <img> di dalam elemen dengan class .card, .card akan menjadi root cakupan.

@scope (.card) {
    img {
        border-color: green;
    }
}

Pelajari lebih lanjut di Membatasi jangkauan pemilih dengan aturan @scope CSS.

scrollend

Fitur lain yang mengurangi kompleksitas dan meningkatkan antarmuka scroll adalah scrollend. Tanpa peristiwa scrollend, tidak ada cara yang andal untuk mendeteksi bahwa scroll telah selesai.

// before scrollend
document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

Dengan peristiwa scrollend, browser akan melakukan semua evaluasi yang sulit ini untuk Anda.

document.onscrollend = event => {…}

Lihat contoh lainnya di Scrollend, peristiwa JavaScript baru.

Transisi tampilan dokumen yang sama

Terakhir, transisi tampilan adalah bagian dari Interop 2025. Pekerjaan ini melibatkan transisi tampilan dokumen yang sama, sehingga untuk aplikasi web satu halaman dan juga class transisi tampilan.

Ikuti perkembangannya di dasbor Interop 2025 untuk melihat perkembangan project ini seiring berjalannya tahun.

Fitur yang disertakan dalam Interop 2025 tidak akan menjadi satu-satunya hal yang menjadi bagian dari Dasar Pengukuran tahun ini, tetapi penyertaannya dalam project memberi kita tanda yang cukup baik bahwa fitur tersebut diprioritaskan dan akan segera hadir.

Kami baru saja mulai

Ini adalah tahun yang menarik bagi Baseline, dan kami telah melakukan banyak hal sejak pengumuman tahun lalu. Sekarang kita berada di posisi saat pengisian ulang data fitur web selesai. Hal ini telah membuka pintu dan memungkinkan alat pengembang dibuat. Kami baru saja memulainya di sini, dan jika Anda memiliki produk atau alat open source yang akan mendapatkan manfaat dari penyertaan data ini, kami ingin mendengar kabar dari Anda.

Pantau terus web.dev karena kami akan terus memublikasikan pengumuman tentang alat baru beserta tutorial untuk membantu Anda memanfaatkan semua yang ditawarkan web.